<template>
  <view class="mine-container">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <image class="avatar" :src="user.photo" mode="aspectFill"></image>
      <text class="username">{{user.postName}} - {{user.nickName}}</text>
      <text class="role">用户名：{{user.userName}}</text>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="goToPendingTasks">
        <text class="menu-text">待检任务</text>
        <image class="arrow-icon" src="/static/images/arrow-right.png"></image>
      </view>
      <view class="menu-item" @click="goToCompletedTasks">
        <text class="menu-text">已检任务</text>
        <image class="arrow-icon" src="/static/images/arrow-right.png"></image>
      </view>
      <view class="menu-item" @click="goToStandards">
        <text class="menu-text">质检标准</text>
        <image class="arrow-icon" src="/static/images/arrow-right.png"></image>
      </view>
      <view class="menu-item" @click="goMine()">
        <text class="menu-text">个人中心</text>
        <image class="arrow-icon" src="/static/images/arrow-right.png"></image>
      </view>
	  <view class="menu-item" @click="outLogin()">
	    <text class="menu-text">退出登录</text>
	    <image class="arrow-icon" src="/static/images/arrow-right.png"></image>
	  </view>
    </view>
	<pveVue/>
  </view>
</template>

<script>
	import pveVue from '../components/pve.vue';
export default {
	components: {
			pveVue
		},
  data() {
    return {
	  id: undefined,
      activeTab: 'mine' ,// 默认是“我的”页面
	  user:{},
    };
  },
  created() {
	this.id = uni.getStorageSync("userIdInfo").userId;
  	this.getUser();
  },
  methods: {
	getUser(){
		uni.request({
			url:'http://127.0.0.1:1101/mesUserLogin/selectUserById',
			method:'GET',
			data: {
				id :this.id
			},
			success: (res) => {
				if(res.data.code == 200){
					this.user = res.data.data;
				}else{
					uni.showToast({
						title: '网络错误，请稍后再试',
						icon: 'none'
					});
				}
			}
		})
	},
    goToPendingTasks() {
      uni.navigateTo({ url: '/pages/tasks/pending' });
    },
    goToCompletedTasks() {
      uni.navigateTo({ url: '/pages/tasks/completed' });
    },
    goToStandards() {
      uni.navigateTo({ url: '/pages/standards/index' });
    },
    goMine() {
      uni.navigateTo({ url: '/pages/mine/info' });
    },
    switchTab(url, tabName) {
      uni.switchTab({ url });
      this.activeTab = tabName;
    },
	outLogin(){
		uni.removeStorageSync("userIdInfo");
		uni.navigateTo({
			url:'/pages/login/login'
		})
	}
  }
};
</script>

<style scoped>
.mine-container {
  padding: 20rpx;
}

/* 用户信息区域 */
.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  background-color: #59A0FF;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: #ffffff 1px solid;
  background-color: ;
  margin-bottom: 20rpx;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

.role {
  font-size: 28rpx;
  color: #fff;
  margin-top: 10rpx;
}

/* 菜单列表 */
.menu-list {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #eee;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-text {
  font-size: 28rpx;
  color: #333;
}

.arrow-icon {
  width: 32rpx;
  height: 32rpx;
}

/* 底部导航栏 */
.tab-bar {
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #eeeeee;
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
